import { useState, useRef } from "react";
import { Swiper, SwiperItem, Image, View } from "@tarojs/components";
import { useDidShow } from "@tarojs/taro";
import { useModel } from "@utils/hooks";
import { clsx } from "clsx";
import TutorialSearch from "./components/TutorialSearch";
import TutorialList from "./components/TutorialList";
import RuiPaging, { RuiPagingRef } from "./components/RuiPaging";
import { $route, https, icons } from "@utils/index";

const Index = (): JSX.Element => {
  // 搜索框
  const [keyword, keywordModel] = useModel("");
  const paging = useRef<RuiPagingRef<Course>>(null);
  const [videos, model] = useModel<Course[]>([]);
  const [banners, _] = useState([
    {
      url: icons.bannerIcon,
      id: 1,
    },
  ]);
  // 分类
  const [categories, setCategories] = useState<Category[]>([]);
  useDidShow(() => {
    getCategoryList();
  });
  // 获取分类
  const getCategoryList = () => {
    https.getCategoryList().then((res) => {
      setCategories(res.data.data);
    });
  };
  const init = () => {
    paging?.current?.reload();
  };
  // 教程列表
  const getCourseList = (pageNum, pageSize) => {
    https
      .getCourseList({ keyword, classify_id: "", pageNum, pageSize })
      .then((res) => {
        const data = res?.data?.data;
        paging?.current?.complete(data?.records);
      })
      .catch((_) => {
        paging?.current?.complete(false);
      });
  };
  return (
    <View className="bg-[#eee]">
      <RuiPaging {...model()} ref={paging} onQuery={getCourseList}>
        <View>
          {/* 搜索框 */}
          <TutorialSearch {...keywordModel()} onSearch={init} />
          {/* banners */}
          <Swiper
            autoplay
            circular
            indicatorDots
            indicatorActiveColor="#f60"
            className="w-[690px] h-[272px] m-[30px]"
          >
            {banners.map((banner, index) => {
              return (
                <SwiperItem key={banner?.url}>
                  <Image
                    src={banner.url}
                    onClick={() => {
                      console.log("banner", banner, index);
                      // const timestamp = Date.now();
                      // const aid = "200376800";
                      // $route({
                      //   appId: "wx7564fd5313d24844",
                      //   url: `pages/video/video?__preload_=${
                      //     timestamp * 10 + 3
                      //   }&__key_=${timestamp * 10 + 4}&avid=${aid}`,
                      // });
                    }}
                    className="w-[690px] h-[272px] block rounded-[20px]"
                  />
                </SwiperItem>
              );
            })}
          </Swiper>

          {/* categories */}
          {categories.length ? (
            <View className="grid grid-cols-3 gap-[20px] mt-[30px] ml-[30px] mr-[30px]">
              {categories.map((category) => {
                return (
                  <View
                    key={category?.id}
                    className={clsx(
                      "rui-flex-cc bg-white rounded-[10px] p-[10px] text-[#666]" // 背景色
                    )}
                    onClick={$route.bind(null, {
                      url: `/pages/index/list?id=${category?.id}&name=${category?.name}`,
                    })}
                  >
                    <View className="text-center">
                      <Image
                        src={category?.icon}
                        className="w-[100px] h-[100px] block rounded-[50px]"
                      />
                      <View className="mt-[10px] text-[26px]">
                        {category?.name}
                      </View>
                    </View>
                  </View>
                );
              })}
            </View>
          ) : (
            <></>
          )}
          {/* 视频列表 */}
          <View className="mt-[30px] ml-[30px] mr-[30px] pb-[30px]">
            <TutorialList videos={videos} />
          </View>
        </View>
      </RuiPaging>
    </View>
  );
};

export default Index;
